// =============================================================================
// SCSS/SITE/STACKS/ICON/_COLOPHON.SCSS
// -----------------------------------------------------------------------------
// Styles for the site's footer.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Base Styles
// =============================================================================

// Base Styles
// =============================================================================

.x-colophon.top {
  position: relative;
  border-top: 1px solid $baseBorderSolid;
  border-top: 1px solid $baseBorderRgba;
  padding: 4% 0;
  background-color: $colophonBackground;

  [class*="span"] {
    .widget:first-child {
      margin-top: 0;
    }
  }

  @include break(cubs) {
    [class*="span"] {
      .widget:first-child {
        margin-top: 65px;
      }
    }

    [class*="span"]:first-child {
      .widget:first-child {
        margin-top: 0
      }
    }
  }

  .widget {
    margin-top: 65px;
  }

  .widget_categories,
  .widget_meta,
  .widget_nav_menu,
  .widget_pages {
    overflow-x: hidden;
  }
}

.x-colophon.bottom {
  border-top: 1px solid $baseBorderSolid;
  border-top: 1px solid $baseBorderRgba;
  padding: 4% 0;
  text-align: center;
  background-color: $colophonBackground;

  .x-colophon-content {
    margin: 10px 0;
    @include font-size(1.0);
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .x-social-global {
    margin: 10px 0;
    a {
      margin: 0 1.25%;
      @include font-size(2.1);
    }
  }

  .x-nav {
    margin: 10px 0;
    line-height: 1.3;

    li {
      margin: 0 0.5em;
      display: inline-block;

      a {
        display: block;
        @include font-size(1.0);
        font-weight: 400;
        letter-spacing: 2px;
        text-transform: uppercase;

        &:hover {
          background-color: transparent;
        }
      }
    }
  }
}